<template>
<view class="feeback_container">
	<view class="content">
		<up-textarea
			placeholder="请输入反馈内容，我们会为您提供更好地服务"
			maxlength="300"
			height="200"
			v-model="opinion"
			count
		></up-textarea>
		<uni-file-picker
			ref="picker"
			fileMediatype="image"
			mode="grid"
			limit="3"
			:auto-upload="false"
			@select="select"
		/>

	</view>
	<button type="primary" @click="submit">提交反馈</button>

</view>
</template>

<script setup>
import {ref} from 'vue'

let opinion = ref('')
let picker = ref(null)
const imgMaxSize = 2*1024*1024

const select = (e)=>{
	console.log(e);
	e.tempFiles.forEach(item=>{
		if(item.size > imgMaxSize){
			uni.showToast({
				title: "图片大小超过2M",
				icon: "none"
			})
			picker.value.files.pop()
		}
	})
}

const submit = ()=>{
	let arr = picker.value.files.map(item=>{
		uni.uploadFile({
			url: 'https://www.example.com/upload',
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	})
}
</script>

<style lang="scss" scoped>
.feeback_container{
	// #ifdef MP
	height: 100vh;
	// #endif 
	// #ifdef H5
	height: calc(100vh - 88rpx);
	// #endif 
	width: 100vw;
	background-color: #f0eff1;
	padding: 15rpx;
	box-sizing: border-box;
	position: relative;
	
	.content{
		background-color: #FFFFFF;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		position: relative;
		
		::v-deep .u-textarea{
			padding-bottom: 250rpx;
		}
		
		::v-deep .u-textarea__count{
			bottom: 16rpx;
			z-index: 99;
		}
		
		::v-deep .uni-file-picker{
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			z-index: 9;
			width: calc(100% - 40rpx);
		}
	}
}

</style>
